<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell center :border="false">
      <div
      slot="title"
      class="channel-title"
      >我的频道</div>
      <van-button
        type="danger"
        plain
        size="mini"
        round
        @click="isEdit = !isEdit"
      >{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
      class="grid-item"
      :class="{active : index === active}"
      :icon="(isEdit && index !==0) ? 'clear' : '' "
      v-for="(channel, index) in userChannels"
      :key="index"
      :text="channel.name"
      @click="onUserChannelClick(channel,index)"/>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell center :border="false">
      <div
      slot="title"
      class="channel-title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
      class="grid-item"
      v-for="(channel, index) in recommendChannels"
      :key="index"
      :text="channel.name"
      @click="onAdd(channel)"/>
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'

export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    userChannels: {
      type: Array,
      required: true
    },
    active: {
      tyoe: Number,
      required: true
    }
  },
  created () {
    this.loadAllChannels()
  },
  computed: {
    ...mapState(['user']),
    // 推荐频道列表
    recommendChannels () {
      return this.allChannels.filter(channel => {
        // 判断channel 是否属于用户频道
        return !this.userChannels.find(userChannel => {
          // 找到满足该条件的元素
          return userChannel.id === channel.id
        })
      })

      // const arr = []
      // this.allChannels.forEach(channel => {
      //   let flag = false
      //   for (let i = 0; i < this.userChannels.length; i++) {
      //     if (this.userChannels[i].id === channel.id) {
      //       flag = true
      //       break
      //     }
      //   }
      //   if (!flag) {
      //     arr.push(channel)
      //   }
      // })
      // return arr
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  mounted () {},
  methods: {
    async loadAllChannels () {
      const { data } = await getAllChannels()
      this.allChannels = data.data.channels
    },
    // 添加频道
    async onAdd (channel) {
      this.userChannels.push(channel)
      // 数据持久化
      if (this.user) {
        console.log('添加---线上')
        // 登录了 数据存储到线上
        await addUserChannel({
          channels: [
            { id: channel.id, seq: this.userChannels.length }
          ]
        })
      } else {
        // 未登录 数据存储到本地
        console.log('添加---本地')
        setItem('user-channels', this.userChannels)
      }
    },
    // 用户点击频道的事件
    onUserChannelClick (channel, index) {
      if (this.isEdit && index !== 0) {
        // 编辑状态 删除频道
        this.deleteChannel(channel, index)
      } else {
        // 非编辑状态 切换频道
        this.switchChannel(index)
      }
    },
    // 删除频道
    async deleteChannel (channel, index) {
      if (index <= this.active) {
        // 更新激活频道的索引
        this.$emit('update-active', this.active - 1)
      }
      this.userChannels.splice(index, 1)
      // 数据持久化
      if (this.user) {
        // 登录了 持久化到线上
        console.log('删除---线上')
        await deleteUserChannel(channel.id)
      } else {
        // 没有登录 持久化到本地
        console.log('删除---本地')
        setItem('user-channels', this.userChannels)
      }
    },

    switchChannel (index) {
      console.log('切换频道')
      // 切换频道
      this.$emit('update-active', index)
      // 关闭弹出层
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
  .channel-edit {
    padding-top: 54px;
    .channel-title {
      font-size: 16px;
      color: #333;
    }
    .grid-item {
      width: 80px;
      height: 43px;
      /deep/ .van-grid-item__content{
        background-color: #f4f5f6;
        .van-grid-item__text {
          font-size: 14px;
          color: #222;
          margin-top: 0;
        }
      }
      /deep/ .van-grid-item__icon {
        position: absolute;
        right: -5px;
        top: -5px;
        font-size: 20px;
        color: #ccc;
      }
    }
    .active {
      /deep/ .van-grid-item__text {
        color: red !important;
      }
    }
  }
</style>
